<template>
    <div class="search">
        <!-- 一、搜索图标 可点击 -->
        <div class="search-icon">
            <span class="search-icon-span"><el-icon class="el-icon-search" /></span>
        </div>
        <!-- 二、所有选中的条件 Tag数组 -->
        <div class="search-tags">
            <div v-for="(item, index) in tags" :key="item.value">
                <el-tag size="medium" closable effect="plain" @close="closeTag(index)">
                    <el-popover :ref="`tagPop${item.value}`" :popper-class="`tag-popo-${item.value}`"
                        placement="bottoom" trigger="click">

                        <!-- 修改指标名称 -->
                        <div class="check-box-item-content" v-show="item.label.split('|')[0] === '指标名称'">
                            <div class="">
                                <el-input size="mini" v-model="updatePopObj.metricName"></el-input>
                            </div>
                            <div class="">
                                <el-button size="mini">确认</el-button>
                            </div>
                        </div>

                        <!-- 修改指标状态 -->
                        <div class="check-box-item-content" v-show="item.label.split('|')[0] === '指标状态'">
                            <el-radio-group v-model="updatePopObj.metricStatus">
                                <el-radio :label="3">成功</el-radio>
                                <el-radio :label="6">失败</el-radio>
                                <el-radio :label="9">未生效</el-radio>
                            </el-radio-group>
                        </div>

                        <!-- 修改指标创建人 -->
                        <div class="check-box-item-content" v-show="item.label.split('|')[0] === '创建人'">
                            <span>{{ updatePopObj.owner }}</span>
                        </div>

                        <!-- 修改专题 -->
                        <div class="check-box-item-content" v-show="item.label.split('|')[0] === '专题'">
                            <el-select v-model="updatePopObj.topic" placeholder="请选择" size="mini">
                                <el-option v-for="item in dropOptions" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>

                        <!-- 修改目标 -->
                        <div class="check-box-item-content" v-show="item.label.split('|')[0] === '目标'">
                            <el-cascader v-model="updatePopObj.target" :options="cascaderOptions"
                                size="mini"></el-cascader>
                        </div>

                        <span slot="reference">{{ item.label }}</span>
                    </el-popover>
                </el-tag>
            </div>
        </div>

        <!-- 三、选择搜索条件的输入框 支持本地模糊查询 -->
        <div class="search-input">
            <!-- 一级级联弹框 -->
            <el-popover ref="search-popover" width="200" popper-class="search-popo" placement="bottom" trigger="click">
                <div class="search-input-level1"
                    v-if="(filterList.findIndex(i => i.label.indexOf(keywordVal) > -1) > -1)">
                    <el-checkbox-group v-model="checkList">
                        <div class="check-box-item" v-for="(item) in filterList" :key="item.value">
                            <el-checkbox :label="item.value" @change="changeCheckBox(item)">
                                <el-popover :ref="`checkboxPop${item.id}`" :popper-class="`cascader-popo-${item.id}`"
                                    placement="right-end" trigger="click">
                                    <!-- 二级级联弹框！ -->
                                    <!-- 指标名称支持模糊搜索 -->
                                    <div class="check-box-item-content" v-show="item.value === 'metricName'">
                                        <div class="">
                                            <el-input size="mini" v-model="addObj.metricName"></el-input>
                                        </div>
                                        <div class="">
                                            <el-button size="mini">确认</el-button>
                                        </div>
                                    </div>

                                    <!-- 指标状态为单选 -->
                                    <div class="check-box-item-content" v-show="item.value === 'metricStatus'">
                                        <el-radio-group v-model="addObj.metricStatus">
                                            <el-radio :label="3">成功</el-radio>
                                            <el-radio :label="6">失败</el-radio>
                                            <el-radio :label="9">未生效</el-radio>
                                        </el-radio-group>
                                    </div>

                                    <!-- 指标创建人 -->
                                    <div class="check-box-item-content" v-show="item.value === 'metricOwner'">
                                        这里本该是个 W3工号组件....
                                    </div>

                                    <!-- 专题 -->
                                    <div class="check-box-item-content" v-show="item.value === 'topic'">
                                        <el-select v-model="addObj.topic" placeholder="请选择" size="mini">
                                            <el-option v-for="item in dropOptions" :key="item.value" :label="item.label"
                                                :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>

                                    <!-- 目标 -->
                                    <div class="check-box-item-content" v-show="item.value === 'target'">
                                        <el-cascader v-model="addObj.target" :options="cascaderOptions"
                                            size="mini"></el-cascader>
                                    </div>

                                    <div slot="reference">{{ item.label }}</div>
                                </el-popover>
                            </el-checkbox>
                        </div>
                    </el-checkbox-group>
                    <el-divider />
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <el-button size="mini" type="primary">确认</el-button>
                        <el-button size="mini" >重置</el-button>
                    </div>
                </div>
                <div v-else>
                    <h3>暂无数据</h3>
                </div>
                <el-input placeholder="请输入搜索关键字(支持模糊搜索)" v-model="keywordVal" @input="fuzzyQuery(keywordVal)" size="small"
                    slot="reference"></el-input>
            </el-popover>
        </div>

        <!-- 四、清除所有选择项图标 可点击 -->
        <div class="search-close">
            <div class="search-close-inner">
                <span class="search-close-inner-span" @click="cleanAllItmes"><el-icon class="el-icon-error" /></span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SearchCom',
    props: {},
    data() {
        return {
            keywordVal: '',
            filterList: [
                {
                    id: 1,
                    label: '指标名称',
                    value: 'metricName'
                },
                {
                    id: 2,
                    label: '指标状态',
                    value: 'metricStatus'
                },
                {
                    id: 3,
                    label: '指标创建人',
                    value: 'metricOwner'
                },
                {
                    id: 4,
                    label: '专题',
                    value: 'topic'
                },
                {
                    id: 5,
                    label: '目标',
                    value: 'target'
                },
            ],
            tags: [
                { value: '1', label: '指标名称|XXX' },
                { value: '2', label: '目标|L1-L2-L3' },
                { value: '3', label: '创建人|cwx900688' },
                { value: '4', label: '指标状态|成功' },
                { value: '5', label: '专题|V587' }
            ],
            checkList: [''],
            checkBoxList: [
                {
                    id: 1,
                    label: '指标名称',
                    value: 'metricName'
                },
                {
                    id: 2,
                    label: '指标状态',
                    value: 'metricStatus'
                },
                {
                    id: 3,
                    label: '指标创建人',
                    value: 'metricOwner'
                },
                {
                    id: 4,
                    label: '专题',
                    value: 'topic'
                },
                {
                    id: 5,
                    label: '目标',
                    value: 'target'
                },
            ],
            dropOptions: [{
                value: '选项1',
                label: '专题一XXXX'
            }, {
                value: '选项2',
                label: 'V587'
            }, {
                value: '选项3',
                label: '专题三XXXX'
            }, {
                value: '选项4',
                label: '专题四XXXX'
            }, {
                value: '选项5',
                label: '专题五XXXX'
            }],
            cascaderOptions: [{
                value: 'zhinan',
                label: '指南',
                children: [{
                    value: 'shejiyuanze',
                    label: '设计原则',
                    children: [{
                        value: 'yizhi',
                        label: '一致'
                    }, {
                        value: 'fankui',
                        label: '反馈'
                    }, {
                        value: 'xiaolv',
                        label: '效率'
                    }, {
                        value: 'kekong',
                        label: '可控'
                    }]
                }, {
                    value: 'daohang',
                    label: '导航',
                    children: [{
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                    }, {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                    }]
                }]
            }, {
                value: 'zujian',
                label: '组件',
                children: [{
                    value: 'basic',
                    label: 'Basic',
                    children: [{
                        value: 'layout',
                        label: 'Layout 布局'
                    }, {
                        value: 'color',
                        label: 'Color 色彩'
                    }, {
                        value: 'typography',
                        label: 'Typography 字体'
                    }, {
                        value: 'icon',
                        label: 'Icon 图标'
                    }, {
                        value: 'button',
                        label: 'Button 按钮'
                    }]
                }, {
                    value: 'form',
                    label: 'Form',
                    children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                    }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                    }, {
                        value: 'input',
                        label: 'Input 输入框'
                    }, {
                        value: 'input-number',
                        label: 'InputNumber 计数器'
                    }, {
                        value: 'select',
                        label: 'Select 选择器'
                    }, {
                        value: 'cascader',
                        label: 'Cascader 级联选择器'
                    }, {
                        value: 'switch',
                        label: 'Switch 开关'
                    }, {
                        value: 'slider',
                        label: 'Slider 滑块'
                    }, {
                        value: 'time-picker',
                        label: 'TimePicker 时间选择器'
                    }, {
                        value: 'date-picker',
                        label: 'DatePicker 日期选择器'
                    }, {
                        value: 'datetime-picker',
                        label: 'DateTimePicker 日期时间选择器'
                    }, {
                        value: 'upload',
                        label: 'Upload 上传'
                    }, {
                        value: 'rate',
                        label: 'Rate 评分'
                    }, {
                        value: 'form',
                        label: 'Form 表单'
                    }]
                }, {
                    value: 'data',
                    label: 'Data',
                    children: [{
                        value: 'table',
                        label: 'Table 表格'
                    }, {
                        value: 'tag',
                        label: 'Tag 标签'
                    }, {
                        value: 'progress',
                        label: 'Progress 进度条'
                    }, {
                        value: 'tree',
                        label: 'Tree 树形控件'
                    }, {
                        value: 'pagination',
                        label: 'Pagination 分页'
                    }, {
                        value: 'badge',
                        label: 'Badge 标记'
                    }]
                }, {
                    value: 'notice',
                    label: 'Notice',
                    children: [{
                        value: 'alert',
                        label: 'Alert 警告'
                    }, {
                        value: 'loading',
                        label: 'Loading 加载'
                    }, {
                        value: 'message',
                        label: 'Message 消息提示'
                    }, {
                        value: 'message-box',
                        label: 'MessageBox 弹框'
                    }, {
                        value: 'notification',
                        label: 'Notification 通知'
                    }]
                }, {
                    value: 'navigation',
                    label: 'Navigation',
                    children: [{
                        value: 'menu',
                        label: 'NavMenu 导航菜单'
                    }, {
                        value: 'tabs',
                        label: 'Tabs 标签页'
                    }, {
                        value: 'breadcrumb',
                        label: 'Breadcrumb 面包屑'
                    }, {
                        value: 'dropdown',
                        label: 'Dropdown 下拉菜单'
                    }, {
                        value: 'steps',
                        label: 'Steps 步骤条'
                    }]
                }, {
                    value: 'others',
                    label: 'Others',
                    children: [{
                        value: 'dialog',
                        label: 'Dialog 对话框'
                    }, {
                        value: 'tooltip',
                        label: 'Tooltip 文字提示'
                    }, {
                        value: 'popover',
                        label: 'Popover 弹出框'
                    }, {
                        value: 'card',
                        label: 'Card 卡片'
                    }, {
                        value: 'carousel',
                        label: 'Carousel 走马灯'
                    }, {
                        value: 'collapse',
                        label: 'Collapse 折叠面板'
                    }]
                }]
            }, {
                value: 'ziyuan',
                label: '资源',
                children: [{
                    value: 'axure',
                    label: 'Axure Components'
                }, {
                    value: 'sketch',
                    label: 'Sketch Templates'
                }, {
                    value: 'jiaohu',
                    label: '组件交互文档'
                }]
            }],
            updatePopObj: {
                metricName: 'XXX',
                metricStatus: 3,
                owner: 'cwx900688 程家福',
                topic: 'V587',
                target: 'L1-L2-L3'
            },
            addObj: {
                metricName: '',
                metricStatus: 0,
                owner: '',
                topic: '',
                target: []
            }
        }
    },

    created() {
        sessionStorage.setItem('prevId', 0)
    },
    mounted() {

    },
    methods: {
        closeTag(index) {
            this.tags.splice(index, 1)
        },
        changeCheckBox(item) {
            let currentCheckboxFlag = sessionStorage.getItem('prevId') === item.id ? true : false

            // 如果不是当前checkbox 并且不是第一次点击 就关闭上一次的popover
            if (!currentCheckboxFlag && Number(sessionStorage.getItem('prevId')) !== 0) {
                let tempId = sessionStorage.getItem('prevId')
                this.$refs[`checkboxPop${tempId}`][0].doClose()
            }

            //将上一次的popover的id存储载sessionStorage中
            sessionStorage.setItem('prevId', item.id)
        },

        cleanAllItmes() {
            this.keywordVal = '';
            this.tags = []
        },

        // 模糊查询
        fuzzyQuery(val) {
            if (val) {
                this.filterList = this.checkBoxList.filter(item => {
                    return item.label.indexOf(val) != -1
                })
            } else {
                this.filterList = [
                    {
                        id: 1,
                        label: '指标名称',
                        value: 'metricName'
                    },
                    {
                        id: 2,
                        label: '指标状态',
                        value: 'metricStatus'
                    },
                    {
                        id: 3,
                        label: '指标创建人',
                        value: 'metricOwner'
                    },
                    {
                        id: 4,
                        label: '专题',
                        value: 'topic'
                    },
                    {
                        id: 5,
                        label: '目标',
                        value: 'target'
                    },
                ]
            }
        }
    }
}
</script>

<style scoped lang="less">
.search {
    width: 100%;
    border: 1px solid red;
    height: 32px;
    line-height: 32px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 2px;

    &-icon {
        width: 40px;

        &-span {
            cursor: pointer;

            :hover {
                color: #409eff;
            }
        }
    }

    &-tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    &-input {
        flex: 1;

        /deep/.el-input__inner {
            border: none !important;
            padding: 0 5px;
            height: 28px !important;
            line-height: 28px !important;
        }
    }

    &-close {
        width: 40px;

        &-inner {
            &-span {
                cursor: pointer;

                :hover {
                    color: #F56C6C;
                }
            }
        }
    }

    /deep/.el-tag--medium {
        height: 30px !important;
        line-height: 30px !important;
    }
}
</style>

<style lang="less">
.search-popo {
    left: 780px !important;

    .el-checkbox-group {
        display: grid !important;
    }

    .el-checkbox {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 5px 0 !important;
    }

    .el-checkbox__label {
        flex: 1 !important;
    }
    .el-divider--horizontal {
        margin: 10px 0 !important;
    }
}

.tag-popo-1 {
    margin-top: 32px;
}

.check-box-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tag-popo-2 {
    margin-top: 32px;
}

.tag-popo-3 {
    margin-top: 32px;
}

.tag-popo-4 {
    margin-top: 32px;
}

.tag-popo-5 {
    margin-top: 32px;
}
</style>